<template>
	<view>
		<block v-if="isload">
			<dd-tab :itemdata="['创意图文','短视频']" :itemst="['0','3']" :st="st" :isfixed="true"
				@changetab="changetab"></dd-tab>
			<form  style="margin-top: 100rpx;"  v-show="st != '3'">
				<uploadluntan ></uploadluntan>
			</form>
			<view style="margin-top: 100rpx;"  v-if="st == '3'">
				<uploadvideo ></uploadvideo>
				
			</view>
		</block>
		
		

		
	</view>
</template>
<script>
	var app = getApp();
	import uploadvideo from '../shortvideo/uploadvideo.vue';
	import uploadluntan from './uploadluntan.vue';
	export default {
		components: {
			uploadvideo,
			uploadluntan
		},

		data() {
			return {
				pre_url: app.globalData.pre_url,
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				datalist: [],
				content_pic: [],
				pagenum: 1,
				cateArr: [],
				cindex: -1,
				pics: [],
				video: '',
				need_call: false,
				shopPopup: false,
				shop_list: [],
				product_list: [],
				selected_shop_index: null,
				selected_prodcut_index: null,
				selected_shop: null,
				selected_products: [],
				selected_product_indexs: [],
				shopPageNum: 1,
				productPageNum: 1,
				nomore: false,
				keyword: '',
				shop_keyword: '',
				st: '0',
				cate2:false,
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getdata();
		},
		onShow() {
			// this.showShopPopup()
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		methods: {

			getdata: function() {
				var that = this;
				that.loading = true;
				app.get('ApiLuntan/fatie', {}, function(res) {
					that.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					}
					that.clist = res.clist;
					var clist = res.clist;
					if (clist.length > 0) {
						var cateArr = [];
						for (var i in clist) {
							if (that.opt && that.opt.cid == clist[i].id) {
								that.cindex = i;
							}
							cateArr.push(clist[i].name);
						}
					} else {
						cateArr = false;
					}
					that.cateArr = cateArr
					if (res.need_call) {
						that.need_call = true;
					}
					that.loaded();
				});
			},
			changetab(e) {
				this.st = e;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			cateChange: function(e) {
				this.cindex = e.detail.value;
			},
			formsubmit: function(e) {
				var that = this;
				console.log(e);
				var clist = that.clist;
				if (clist.length > 0) {
					if (that.cindex == -1) {
						app.error('请选择分类');
						return false;
					}
					var cid = clist[that.cindex].id;
				} else {
					var cid = 0;
				}
				var formdata = e.detail.value;
				var content = formdata.content;
				var pics = formdata.pics;
				var video = formdata.video;
				let product = that.selected_products
				let shop = that.selected_shop
				console.log(shop, product)
				if (shop)
					delete shop.prolist
				var mobile = formdata.mobile;
				if (content == '' && pics == '') {
					app.error('请输入内容');
					return false;
				}
				// console.log("pics", formdata.pics)
				// return false
				if (pics == '') {
					app.error('至少上传一张图片！')
					return false
				}
				app.post('ApiLuntan/fatie', {
					cid: cid,
					pics: pics,
					content: content,
					video: video,
					shop: shop,
					product: product,
					mobile: mobile,
					type: that.st
				}, function(res) {
					app.showLoading(false);
					if (res.status == 1) {
						app.success(res.msg);
						setTimeout(function() {
							app.goback(true);
						}, 1000);
					} else {
						app.error(res.msg);
					}
				});
			},
			uploadimg: function(e) {
				var that = this;
				var field = e.currentTarget.dataset.field
				var pics = that[field]
				if (!pics) pics = [];
				app.chooseImage(function(urls) {
					for (var i = 0; i < urls.length; i++) {
						pics.push(urls[i]);
					}
					if (field == 'pic') that.pic = pics;
					if (field == 'pics') that.pics = pics;
					if (field == 'zhengming') that.zhengming = pics;
				}, 9)
			},
			uploadvideo: function() {
				var that = this;
				console.log(11);
				uni.chooseVideo({
					compressed: false,
					sourceType: ['album', 'camera'],
					maxDuration: 60,
					success: function(res) {
						var tempFilePath = res.tempFilePath;
						app.showLoading('上传中');
						uni.uploadFile({
							url: app.globalData.baseurl + 'ApiImageupload/uploadImg/aid/' + app
								.globalData.aid + '/platform/' + app.globalData.platform +
								'/session_id/' + app.globalData.session_id,
							filePath: tempFilePath,
							name: 'file',
							success: function(res) {
								app.showLoading(false);
								var data = JSON.parse(res.data);

								if (data.status == 1) {
									that.video = data.url;
								} else {
									app.alert(data.msg);
								}
							},
							fail: function(res) {
								app.showLoading(false);
								app.alert(res.errMsg);
							}
						});
					},
					fail: function(res) {
						console.log(res); //alert(res.errMsg);
					}
				});
			},
			removeimg: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index
				var field = e.currentTarget.dataset.field
				var pics = that[field]
				pics.splice(index, 1)
			},
		}
	};
</script>
<style>
	page {
		background: #f7f7f7
	}

	.st_box {
		padding: 4rpx 0;
		margin-top: 90rpx;
	}

	.st_title {
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
	}

	.st_title1 {
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		border-bottom: 1px solid #D0D0D0
	}

	.st_title image {
		width: 18rpx;
		height: 32rpx
	}

	.st_title text {
		color: #242424;
		font-size: 36rpx
	}

	/* .st_title button{ background: #31C88E; border-radius:6rpx; line-height: 48rpx;border: none; padding:0 20rpx ;color:#fff;margin:0} */


	.st_title button {
		background: #1658c6;
		border-radius: 16rpx;
		line-height: 48rpx;
		border: none;
		padding: 0 20rpx;
		color: #fff;
		font-size: 18px;
		text-align: center;
		/* margin: 0; */
		width: 45%;
		display: flex;
		height: 80rpx;
		justify-content: center;
		align-items: center;
	}



	.st_form {
		padding: 24rpx;
		background: #ffffff;
		margin: 16rpx;
		border-radius: 30rpx;
	}

	.st_form input {
		width: 100%;
		height: 120rpx;
		border: none;
		border-bottom: 1px solid #EEEEEE;
	}

	.st_form input::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #BBBBBB;
		font-size: 24rpx
	}

	.st_form textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx 0;
		border: none;
		/*border-bottom: 1px solid #EEEEEE;*/
		background-color: #f9f9f9;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-top: 16rpx;
	}

	.layui-imgbox {
		margin-right: 16rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		position: relative;
	}

	.layui-imgbox-close {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		right: -16rpx;
		top: -16rpx;
		z-index: 90;
		color: #999;
		font-size: 32rpx;
		background: #fff
	}

	.layui-imgbox-close image {
		width: 100%;
		height: 100%
	}

	.layui-imgbox-img {
		display: block;
		width: 195rpx;
		height: 195rpx;
		padding: 1px;
		border: #d3d3d3 1px solid;
		background-color: #f6f6f6;
		overflow: hidden
	}

	.layui-imgbox-img>image {
		max-width: 100%;
	}

	.layui-imgbox-repeat {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		line-height: 28rpx;
		right: 2px;
		bottom: 2px;
		color: #999;
		font-size: 30rpx;
		background: #fff
	}

	.uploadbtn {
		position: relative;
		height: 100rpx;
		width: 100rpx
	}

	.uploadbtn_ziti1 {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 26rpx;
		margin-top: 50rpx;
		color: #bfbfbf;
	}

	.uploadbtn_ziti2 {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		padding-top: 20rpx;
		margin-top: 20rpx;
		/*border-top: 1px solid #EEEEEE;*/
	}


	.shop-selecter,
	.product-selecter {
		background-color: #f9f9f9;
		padding: 24rpx 20rpx;
		font-size: 28rpx;
		color: #8b8b8b;
		margin-top: 24rpx;
		border-radius: 14rpx;
	}

	.shop-selecter>.wrapper,
	.product-selecter>.wrapper {
		justify-content: space-between;
	}

	.product-selecter .product-info .product-title {
		width: 240px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		display: block;
	}

	.shop-selecter>.wrapper>.shop-join {
		color: #999;
		font-size: 28rpx;
	}


	.popup-container {
		min-height: 1093rpx;
		background-color: #f1f3f5;
		box-sizing: border-box;
		padding: 30rpx 24rpx;
		/* z-index: 99999999999; */
		position: relative;
		bottom: 0;
		border-radius: 32rpx 32rpx 0;
		width: 100%;
	}

	.popup-container .popup-header {
		font-family: 'IM FELL French Canon SC';
		font-style: normal;
		font-weight: 400;
		font-size: 32rpx;
		text-align: center;
		color: #000000;
	}

	.popup-container .popup-main {
		margin-top: 32rpx;

	}

	.popup-container .popup-product-main {
		margin-bottom: 16rpx;
	}

	.popup-container .popup-main .popup-list {
		height: 772rpx;
		margin-top: 20rpx;
	}

	.popup-container .popup-main .shop-list {
		height: 856rpx;
	}

	.popup-container .popup-main .popup-list .popup-list-item {
		padding: 26rpx 18rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 16rpx;
	}

	.popup-container .popup-main .popup-list .popup-list-item:first-child {
		margin-top: 0;
	}

	.popup-container .popup-main .shop-list .shop-list-item {}

	.popup-container .popup-main .shop-list .shop-list-item .item-header {
		display: flex;
	}


	.popup-container .popup-main .shop-list .shop-list-item .item-header .shop-name {
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: #000000;
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0em;

	}

	.popup-container .popup-main .shop-list .shop-list-item .item-header .shop-name .shop-icon {
		position: relative;
		width: 40rpx;
		height: 40rpx;
	}

	.popup-container .popup-main .shop-list .shop-list-item .item-header .shop-name .shop-icon image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.popup-container .popup-main .shop-list .shop-list-item .item-header .shop-name .shop-title {
		margin-left: 8rpx;
	}

	.popup-container .popup-main .popup-list .popup-list-item .item-main {
		display: flex;
	}

	.popup-container .popup-main .shop-list .shop-list-item .item-main {
		margin-top: 32rpx;

	}

	.popup-container .popup-main .shop-list .shop-list-item .item-main .image-area {
		display: block;

	}


	.popup-container .shop-list .shop-list-item .item-main .image-area .image-block {
		width: 172rpx;
		height: 132rpx;
	}

	.popup-container .pro-list .pro-list-item .item-main .image-area .image-block {
		width: 160rpx;
		height: 160rpx;
	}

	.popup-container .popup-main .popup-list .popup-list-item .item-main .image-area .image-block image {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 16rpx;

	}

	.popup-container .popup-main .pro-list .pro-list-item .item-main .content-area {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 16rpx;
	}

	.popup-container .popup-main .shop-list .shop-list-item .item-main .content-area {
		color: #949494;
		margin-left: 16rpx;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}


	.popup-container .popup-main .popup-list .popup-list-item .item-main .content-area .address-area {
		display: flex;
	}

	.popup-container .popup-main .shop-list .shop-list-item .item-main .content-area .icon {
		width: 32rpx;
		height: 32rpx;
	}

	.popup-container .popup-main .popup-list .popup-list-item .item-main .content-area .text {
		text-overflow: ellipsis;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		margin-left: 8rpx;
		width: 420rpx;
	}

	.popup-container .popup-main .shop-list .shop-list-item .item-main .content-area .text {
		width: 372rpx;
	}

	.popup-container .popup-main .popup-list .popup-list-item .item-main .operate-area {
		display: flex;
		align-items: center;
		margin-left: 16rpx;
	}



	.popup-container .popup-main .popup-list .popup-list-item .item-main .content-area .pro-title-area .text {
		color: #000000;
		font-size: 32rpx;
		text-align: left;
		white-space: revert;
		line-clamp: 2;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.popup-container .popup-main .popup-list .popup-list-item .item-main .content-area .pro-price-area {
		font-size: 32rpx;
		/* identical to box height */


		color: #FF5757;

	}

	.topsearch {
		width: 100%;
	}

	.topsearch .f1 {
		height: 64rpx;
		border-radius: 30rpx;
		border: 0;
		background-color: #ffffff;
		flex: 1;
	}

	.topsearch .f1 .img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10px
	}

	.topsearch .f1 input {
		height: 100%;
		flex: 1;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.topsearch .f1 .camera {
		height: 72rpx;
		width: 72rpx;
		color: #666;
		border: 0px;
		padding: 0px;
		margin: 0px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 40rpx;
	}

	.topsearch .search-btn {
		display: flex;
		align-items: center;
		color: #5a5a5a;
		font-size: 30rpx;
		width: 60rpx;
		text-align: center;
		margin-left: 20rpx
	}
	
	
	.popup-container .follow-list .follow-list-item .item-main .image-area .image-block {
		width: 160rpx;
		height: 160rpx;
	}
	.popup-container .popup-main .follow-list .follow-list-item .item-main .content-area {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 16rpx;
	}
</style>
